<template>
  <div class="reg-container">
    <div class="reg-box">
      <div class="title-box"><h3>后台管理系统</h3></div>
      <!-- 注册表单区域 -->
      <el-form :model="registerForm" :rules="rulesObj" ref="registerForm">
        <el-form-item prop="username">
          <el-input
            v-model="registerForm.username"
            placeholder="请输入用户名"
          ></el-input>
        </el-form-item>
        <el-form-item prop="email">
          <el-input
            v-model="registerForm.email"
            placeholder="请输入用email地址"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="registerForm.password"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
        <el-form-item prop="repassword">
          <el-input
            v-model="registerForm.repassword"
            placeholder="请确认密码"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onRegister" class="btn-reg"
            >注册</el-button
          >
          <el-link type="info" @click="$router.push('/login')">登录</el-link>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
  
<script>
import { registerAPI } from "@/api";
export default {
  name: "my-register",
  data() {
    const checkRepasswordFn = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.registerForm.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      registerForm: {
        username: "",
        email: "",
        password: "",
        repassword: "",
      },
      rulesObj: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            pattern: /^[a-zA-Z0-9]{1,15}$/,
            message: "用户名必须为字母数字1-10个",
            trigger: "blur",
          },
        ],
        email: [
          { required: true, message: "请输入email", trigger: "blur" },
          {
            pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
            message: "email格式不正确",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            pattern: /^[\S]{6,10}$/,
            message: "密码必须为6-10个非空字符",
            trigger: "blur",
          },
        ],
        repassword: [
          { required: true, message: "请确认密码", trigger: "blur" },
          { validator: checkRepasswordFn, trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    onRegister() {
      // js兜底校验，避免直接点击注册，跳过校验环节
      this.$refs.registerForm.validate((valid) => {
        if (valid) {
          // 通过校验，拿到表单值
          registerAPI(this.registerForm)
            .then((response) => {
              if (response.data.accessToken) {
                this.$message.success(`${response.data.user.email} 注册成功`);
              }
              // console.log(response.data.user.email, "注册成功");
              // console.log("accessToken：", response.data.accessToken);
              this.$router.push("/login");
            })
            .catch((error) => {
              console.log(error);
              if (error.response) {
                // 请求已发出，但服务器响应的状态码不在 2xx 范围内
                this.$message.error(` 注册失败： ${error.response.data}`);
                // console.log("状态码:", error.response.status);
                // console.log("响应头:", error.response.headers);
              } else if (error.request) {
                // 请求已发出，但没有收到响应
                this.$message.error(
                  `请求已发出，但没有收到响应: ${error.request}`
                );
              } else {
                // 在设置请求时发生了一些事情，触发了错误
                this.$message.error(`设置请求时发生错误:${error.message}`);
              }
            });
        } else {
          return false;
        }
      });
    },
  },
};
</script>
  
<style scoped>
.reg-container {
  background: url("../../assets/images/login_bg.jpg") center;
  background-size: cover;
  height: 100%;
}
.reg-box {
  width: 400px;
  height: 410px;
  background-color: #fff;
  border-radius: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 0 20px;
  box-sizing: border-box;
}
.title-box {
  height: 40px;
  /* background-color: beige; */
  margin-bottom: 10px;
}
.title-box h3 {
  font-size: 27px;
  letter-spacing: 7px;
  font-family: "Microsoft YaHei";
  text-align: center;
  color: #00bfff;
}
.el-form-item {
  margin-bottom: 20px;
}
.btn-reg {
  width: 100%;
}
</style>